<template>
	<view style="padding:10px">
		<uni-forms ref="baseForm" label-width="75px">
			<!-- 商铺名称 -->
			<uni-forms-item  label="商铺名称">
				<uni-easyinput v-model="userInfo.Title" placeholder="请输入商铺名称" />
			</uni-forms-item>
			<!-- 营业执照上传 -->
			<uni-forms-item label="营业执照">
				<view class="cent-bottom-m">
					<view class="uoloadImg">
						<view class="" v-if="fileList.length>0">
							<view v-for="(item, index) in fileList" :key="index">
								<view class="uoloadImg-image">
									<image @click="checkImgbox(fileList, index)" :src="item" mode=""></image>
									<!-- <image style="width: 60%;height:220rpx" @click="checkImgbox(fileList, index)" :src="el" mode=""></image> -->
									<!-- <view class="jian" @click="popImg(index)">
										<image style="width:50px;"  src="../../static/add.png"></image>
									</view> -->
								</view>
							</view>
						</view>
						<view class="uoloadImg-box" @click="openImagePage" v-if="uploadFlag">
							<view class="jia" style="">
								<image style="width:80rpx;height:80rpx;" src="../../static/user/add.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</uni-forms-item>
		</uni-forms>

		<button  @click="realNameAuthentication" style="position: fixed;bottom: 40px;width: calc(100% - 20px);"
		    :disabled="disabled"
			:loading="loading"
			:type="background">{{authenticationTitle}}</button>
	</view>
</template>

<script>
	import {
		regPhone,
		regIdCard
	} from '../../utils/regExp.js'
	export default {
		data() {
			return {
				// 商铺认证按钮背景
				background:'primary',
				authenticationTitle:"商铺认证",
				// 按钮是否禁用
				disabled:false,
				// 是否认证过了
				isAuthentication:false,
				// 按钮加载
				loading:false,
				RealName:"",
				RealShopId:"",
				// 商铺名称下拉数据
				rangeShopData: [
				],
				rangeShopListData:[],
				fileList:[
					
					],
				imgUrl: "https://lmst.youmitao8.com",
				sizeType: ['compressed'],
				imageList: [], // 上传图片地址
				uploadFlag: true ,// 上传图片大于3张隐藏上传按钮
				tempAvatar:"",
				Img:"",
				isdel:false,
				userInfo: {},
				// 公司信息
				CompanyInfo:{}
			}
		},
		onLoad(options) {
			this.CompanyInfo = JSON.parse(options.CompanyInfo)
			this.userInfo = uni.getStorageSync('userInfo')
			this.userInfo.Title = this.CompanyInfo.Title
			if(this.CompanyInfo.Id){
				this.shopInfo()
			}
		},
		onShow() {
			// 获取是否存在商铺信息列表数据
			// this.GetLinkManCusList()
			// 获取商铺信息
			// this.shopInfo()
		},
		methods: {
			// 获取商铺信息
			shopInfo() {
				this.$http('post', '/Base_Manage/Base_Company/GetTheData?id='+this.CompanyInfo.Id).then(res => {
					if (res.Success) {
						console.log('获取商铺信息====', res)
						if(res.Data.CardPhoto){
							this.fileList=[]
							this.fileList.push(res.Data.CardPhoto)
							// 隐藏上传区域
						    this.uploadFlag= false
							// 隐藏商铺认证按钮
							this.disabled=true
							this.authenticationTitle="商铺已认证"
							this.background="default"
							
						}else{
							this.background="primary"
							
						}
						
					}
				})
			},
			GetLinkManCusList(){
				this.$http('post', '/BO/CustomerLinkman/GetLinkManCusList?Phone='+this.userInfo.Id).then(res => {
					if (res.Success && res.Data) {
						console.log('获取商铺列表', res)
						this.rangeShopListData=res.Data
						let shopData=res.Data.map(item=>{
							return  {
								value:item.Id,
								text:item.cCusName
							}
						})
						this.rangeShopData= shopData
					} else this.$api.msg('查询商铺不存在')
				})
			},
			// 商铺下拉
			shopSelectChange(e){
				console.log('商铺下拉', e,this.rangeShopData, this.rangeShopListData)
				let index= this.rangeShopListData.findIndex(item=>item.Id===e)
				this.userInfo.RealShopId= e
				this.RealName = this.rangeShopListData[index].cCusName
				console.log('获取下标', index, this.rangeShopListData[index].cCusName, this.userInfo.RealShopId)
				// this.userInfo.RealName =
				// this.RealShopId=e
				// let RealName=""
				// // 获取匹配得下拉选中项得id  取出名字
				// this.rangeShopListData.forEach(item=>{
				// 	console.log('item', item,e)
				// 	if(item.Id===e){
				// 		RealName= item.cCusName
				// 	}
				// })
				// this.userInfo.RealName = RealName
				// this.RealName = RealName
			},
			// 营业执照上传
			openImagePage(){
				let that = this;
				// 暂时不删除 
				// if (that.fileList.length >= 3) {
				// 	uni.showToast({
				// 		title: "最多支持3张图片",
				// 		icon: "none"
				// 	})
				// 	return;
				// }
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						console.log('是否上传成功', res)
						that.uploadImage(res.tempFilePaths)
					}
				});
			},
			// 图片上传
			uploadImage(tempFilePaths) {
				this.loading=true
				console.log('开始上传了', tempFilePaths, uni.getStorageSync('token'))
				// 禁用商铺认证按钮
				this.disabled=true
				
				uni.showLoading({
					title: '图片上传中'
				});
				let _this = this;
				uni.uploadFile({
					// url: 'https://api.yoojet.com/Base_Manage/Upload/Filleimag', //接口地址
					url: 'https://api.yoojet.com/Base_Manage/Upload/UploadFileProductByForm', //接口地址
					header: {
						"token": uni.getStorageSync('token'),
					}, //请求token
					filePath: tempFilePaths[0],
					name: 'file',
					success: (res) => {
						uni.showToast({
							title: '已上传'
						});
						// 取消按钮加载
						this.loading=false
						this.disabled=false
						let data = JSON.parse(res.data); 
						let url = data.url;
						
						// 选中图片
						if (_this.fileList.indexOf(url) == -1) {
							// 先清空  避免后续拼接多个图片   后续如果多图片上上传修改这里即可
							_this.fileList=[]
							_this.fileList.push(url);
							
						}
						uni.hideLoading();
						// 隐藏上传图片区域
						_this.uploadFlag = false
						// 暂时不删除   根据后续需要打开即可
						// if (_this.fileList.length >= 3) {
						// 	
						// } else {
						// 	_this.uploadFlag = true
						// }

					},
					fail:(err)=>{
						uni.hideLoading();
					}
				});
			},
			//放大图片
			checkImgbox(fileList, index) { 
				// 放大预览  暂时不用删除
				// console.log(fileList,index,999)
				// let arr = [];
				// fileList.forEach((el) => {
				// 	arr.push(el);
				// })
				// uni.previewImage({
				// 	urls: arr,
				// 	current: index
				// });
				var that =this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						console.log('是否上传成功', res)
						that.uploadImage(res.tempFilePaths)
					}
				});
			},
			//删除图片
			popImg(index) { 
				this.fileList.splice(index, 1);
				if(this.fileList.length<1){
					this.uploadFlag = true
				}
			},
			// 商铺认证
			realNameAuthentication() {
				if (!this.userInfo.Title) return this.$api.msg('请输入商铺名称')
				if(this.fileList.length==0) return this.$api.msg('请上传营业执照照片')
				console.log('可以执行了', this.userInfo.Title, this.fileList[0],this.CompanyInfo.Id)
				uni.showLoading({
					title:'认证中'
				})
				this.$http('post', '/Base_Manage/Base_Company/Authentication', {
					 "Id": this.CompanyInfo.Id,
					  "Title": this.userInfo.Title,
					  "CardPhoto": this.fileList[0]
				}).then(res => {
					console.log(res);
					if(res.Success){
						this.$api.msg('认证成功')
						uni.hideLoading()
						setTimeout(function(){
							uni.navigateBack({
							  delta: 1
							})
						},1000)
						
					}
				})
				
				
				
			}
		}
	}
</script>

<style lang="scss">
	.cent-bottom-m{
		.uoloadImg{
			.uoloadImg-image{
				.jian{
					
				}
				
			}
			.uoloadImg-image{
				image{
					width: 60%;
					height:320rpx;
				}
			}
			.uoloadImg-box{
				.jia{
					background-color: #EDEDED;
					border-radius: 16rpx;
					width: 60%;
					height:320rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					
				}
			}
			
		}
		
	}

</style>